<template>角色名称
  <el-input v-model="form.userId" placeholder="请输入角色名称" clearable style="width: 300px;"/> &nbsp;
  <el-button type="primary" @click="GetAllRole">查询</el-button>
  <div>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" :index="indexMethod" label="编号" width="60" align="center" />
    <el-table-column prop="roleName" label="角色名称" >
      <template v-slot="scope">
          <el-link plain @click="GetRoleList(scope.row)">{{ scope.row.roleName }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="addName" label="创建人" />
    <el-table-column prop="addTime" label="创建日期" width="140">
      <template v-slot="scope">
        <span v-if="scope.row.addTime!=null">{{ (scope.row.addTime).substring(0,16) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateName" label="修改人" />
    <el-table-column prop="updateTime" label="修改日期" width="140">
      <template v-slot="scope">
        <span v-if="scope.row.updateTime!=null">{{ scope.row.updateTime.substring(0,16)}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作"  width="150">
      <template v-slot="scope">
        <el-link type="warning" style="width: 30px;" @click="Update(scope.row.roleId)">修改</el-link>
        <el-link type="danger" style="width: 30px;" @click="Del(scope.row.roleId)">删除</el-link>
        <el-link type="danger" style="width: 60px;" @click="FGen(scope.row)">分配人员</el-link>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分配 -->
  <el-dialog v-model="dialogForm" width="600" center :before-close="handleClose">
    <span style="font-size: 20px;font-weight: bold;">请设置
      <span style="color: red;font-size: 18px;font-weight: bold;">【{{ form.roleName }}】</span>
    角色的员工:</span>
          <el-form :model="form">
            <el-divider style="float: left;"/>选择部门:
              <el-tree
                :data="data"
                node-key="value"
                show-checkbox
                :default-checked-keys="form.region"
                @check-change="handleCheckChange"
                style="width: 140px"
                :default-expand-all="true"
              />
              <el-divider style="float: left;"/>请选择员工:
              <el-tree
                :data="data1"
                node-key="value"
                show-checkbox
                :default-checked-keys="form.employee"
                @check-change="CheckChange"
                style="width: 240px"
                :default-expand-all="true"
              />
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="Save">确定保存</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 角色名称弹框 -->
        <el-dialog v-model="FormVisible1" width="500">
        <h3>属于角色【{{ form.roleName }}】的员工如下:</h3>
        <el-tag v-for="item in UserS" :key="item.userId" style="margin-left: 10px;" closable
            @close="DelRoleUser(item.relatId)">
            {{ item.userName }}
        </el-tag>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-link style="font-size: 40px;font-weight: bold;" @click="Jia">+</el-link>
    </el-dialog>
  </div>
  <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[4, 8 ,10]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.listCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';

const dialogForm = ref(false)
const FormVisible1=ref(false)
const userInfo=ref([])
const sectoriD=ref([])
const form = reactive({
  roleId:'',
  roleName: '',
  region: [],
  employee:[],
  userId:'',
  pageIndex:1,
  pageSize:4,
  listCount:0,
  pageCount:0
})
//部门
const data = [
{
    value: '1',
    label: 'IT信息部',
  },
  {
    value: '2',
    label: '人力资源部',
  },
  {
    value: '3',
    label: '财务部',
  },
]
 const data1=ref([])
 //树形部门
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleCheckChange = (data:any) => {
    sectoriD.value.push(data.value)
    axios.post('User/GetInquire', {ids: sectoriD.value.toString()}
    ).then((ret) => {
      console.log(ret.data);
      data1.value = ret.data.data;
    });
};
//树形员工
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CheckChange=(data:any)=>{
  userInfo.value.push(data.value)
  console.log(userInfo.value);
}
const indexMethod=(index:number)=>{
  return index + 1
}
//钩子
onMounted(()=>{
  GetAllRole()
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const FGen=(row:any)=>{
  form.roleName=row.roleName
  form.roleId=row.roleId
  axios.get('Role/SectorBackfill', {
    params: {
      roleId:row.roleId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    form.region = ret.data.data.map(a=>a.sectoriD)
    console.log(form.region);
    form.employee = ret.data.data.map(x=>x.userId)
    console.log(form.employee);
  })
  dialogForm.value=true
}
//用户角色添加
const Save=()=>{
  const from={
    roleId:form.roleId,
    userId:userInfo.value,
  }
  console.log(from.userId);
  console.log(from);

  axios.post(`Role/GetRelatedAdd`,from).then((ret) => {
    console.log(ret.data)
    if(ret.data.code==1){
      alert('保存成功')
      return
    }else{
      alert(ret.data.message)
    }
  })
}
//角色列表
const tableData = ref([])
const GetAllRole=()=>{
  axios.get('Role/Show', {
    params:{
      pageIndex:form.pageIndex,
      pageSize:form.pageSize,
      roleName:form.userId
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value=ret.data.data.lists
    form.listCount=ret.data.data.listCount
    form.pageCount=ret.data.data.pageCount
  })
}
const handleSizeChange = (val: number) => {
  form.pageSize=val
  GetAllRole()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  GetAllRole()
}
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
//删除
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Del=(row:any)=>{
  ElMessageBox.confirm(
    '确定删除吗？?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('Role/Delete?roleId='+ row
      ).then((ret) => {
        console.log(ret.data)
        if(ret.data.code==1){
          ElMessage.success('删除成功')
          GetAllRole()
        }else{
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消',
      })
    })
}
//修改
const Update=(roleId:number)=>{
  router.push({
    path:'/RoleUpda',
    query:{
      roleId:roleId
    }
  })
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const UserS:any=ref([])
//角色的员工反填
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const GetRoleList=(row:any)=>{
  form.roleName=row.roleName
  form.roleId=row.roleId
  FormVisible1.value=true
  axios.get('Role/Employee', {
    params: {
      roleId:row.roleId
    }
  }).then((ret) => {
    console.log(ret.data)
    UserS.value=ret.data.data
  })
}
//加号
const Jia=()=>{
  FormVisible1.value=false
  dialogForm.value=true
  FGen(form)
}
//删除角色里的用户
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const DelRoleUser=(relatId: any)=>{
  axios.post('Role/DeleteRelated', {relatId}).then((ret) => {
    console.log(ret.data)
    if(ret.data.code==1){
      ElMessage.success('删除成功')
      GetRoleList(form)
    }else{
      ElMessage.error('删除失败')
    }
  })
}
//关闭
const handleClose=()=>{
  location.reload();
}
</script>

<style scoped>

</style>